<template>
  <div>
    <div class="form" >
      <div style="width: 300px;display: flex;align-items: center">
        <div style="width: 100px;">房间号：</div>
        <el-input v-model="keyWord.kjhm" placeholder="请输入空间号码"></el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="showXmkj()">搜索</el-button>
      </div>
    </div>
    <div style="padding: 0 80rem 5px 0">
      <el-button type="primary" icon="el-icon-plus" v-permission="'saveXmkj'"
                 @click="newXmkjdialogVisible = true">新增</el-button>
    </div>
    <el-table :data="xmKjList" border class="etable">
      <el-table-column align="center" prop="xmfjHm" label="空间号码">
      </el-table-column>
      <el-table-column align="center" prop="xmfjWz" label="房间位置">
      </el-table-column>
      <el-table-column align="center" prop="xmMc" label="当前项目名称">
      </el-table-column>
      <el-table-column align="center" prop="xmfjSize" label="房间占地">
      </el-table-column>
        <el-table-column align="center" prop="status" label="项目空间状态">
          <template slot-scope="scope">
            <el-tag effect="dark" type="success" v-if="scope.row.status === '0'">空闲</el-tag>
            <el-tag effect="dark" type="primary" v-if="scope.row.status === '1'">使用中</el-tag>
            <el-tag effect="dark" type="danger" v-if="scope.row.status === '-1'">不可用</el-tag>
          </template>
        </el-table-column>
      <el-table-column prop="xmfjSjt" label="清洁照片" width="140px" header-align="center" align="center">
        <template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="require('../../assets/xmkj/'+scope.row.xmfjSjt)"
              :preview-src-list="[require('../../assets/xmkj/'+scope.row.xmfjSjt)]">
          </el-image>
          <el-button  v-if="scope.row.status !== '-1'" @click="toupxmfjSjt(scope.row.xmfjBh)" type="text" size="small" v-permission="'saveXmkj'">上传图片
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="xmfjJrsj" label="入驻房间日期">
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button  @click="toUpdateXmkj(scope.row.xmfjBh)" v-permission="'saveXmkj'" type="primary" size="small">修改
          </el-button>
          <el-button  @click="toXmkjDetail(scope.row.xmfjBh)" type="info" size="small">详情
          </el-button>
          <el-button v-if="scope.row.status === '0' && scope.row.xmMc != ''" @click="tostopXmkj(scope.row.xmfjBh)" type="danger" size="small" v-permission="'stopXmkj'">停用
          </el-button>
          <el-button v-if="scope.row.status === '-1'" @click="tostartXmkj(scope.row.xmfjBh)" type="success" size="small" v-permission="'startXmkj'">起用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination ref="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="size">
      </el-pagination>
    </div>

    <el-dialog title="新增项目空间" :visible.sync="newXmkjdialogVisible" width="50%">
      <el-form :model="newXmkj" :inline="true" class="demo-form-inline">
        <el-form-item label="房间号" label-width="100px">
          <el-input v-model="newXmkj.xmfjHm" autocomplete="off" :disabled="isDetail"></el-input>
        </el-form-item>
        <el-form-item label="房间位置" label-width="100px">
          <el-input v-model="newXmkj.xmfjWz" autocomplete="off" ></el-input>
        </el-form-item><br/>
        <el-form-item label="房间占地" label-width="100px">
          <el-input v-model="newXmkj.xmfjSize" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="启用时间" label-width="100px">
          <el-date-picker v-model="newXmkj.xmfjQysj" type="date" placeholder="选择空间启用时间"></el-date-picker>
        </el-form-item><br/>
        <el-form-item label="房间空调情况" label-width="100px">
          <el-input v-model="newXmkj.xmfjKtqk" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item>
        <el-form-item label="桌椅情况" label-width="100px">
          <el-input v-model="newXmkj.xmfjZuoyi" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item><br/>
        <el-form-item label="门窗情况" label-width="100px">
          <el-input v-model="newXmkj.xmfjMcqk" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item>
        <el-form-item label="其他" label-width="100px">
          <el-input v-model="newXmkj.xmfjQita" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newXmkjdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addXmkj()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改项目空间" :visible.sync="upXmkjdialogVisible" width="50%">
      <el-form :model="upXmkj" :inline="true" class="demo-form-inline">
        <el-form-item label="房间号" label-width="100px">
          <el-input v-model="upXmkj.xmfjHm" autocomplete="off" :disabled="isDetail"></el-input>
        </el-form-item>
        <el-form-item label="房间位置" label-width="100px">
          <el-input v-model="upXmkj.xmfjWz" autocomplete="off" ></el-input>
        </el-form-item><br/>
        <el-form-item label="房间占地" label-width="100px">
          <el-input v-model="upXmkj.xmfjSize" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="启用时间" label-width="100px">
          <el-date-picker v-model="upXmkj.xmfjQysj" type="date" placeholder="选择空间启用时间"></el-date-picker>
        </el-form-item><br/>
        <el-form-item label="房间空调情况" label-width="100px">
          <el-input v-model="upXmkj.xmfjKtqk" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item>
        <el-form-item label="桌椅情况" label-width="100px">
          <el-input v-model="upXmkj.xmfjZuoyi" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item><br/>
        <el-form-item label="门窗情况" label-width="100px">
          <el-input v-model="upXmkj.xmfjMcqk" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item>
        <el-form-item label="其他" label-width="100px">
          <el-input v-model="upXmkj.xmfjQita" autocomplete="off" type="textarea" :rows="2" style="width: 510px" ></el-input>
        </el-form-item><br/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upXmkjdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateXmkj()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="上传项目空间照片" :visible.sync="upXmfjSjtdialogVisible" width="30%">
      <el-upload class="avatar-uploader"
                 action="http://localhost:8089/xmkj/uploadSjt"
                 :show-file-list="false"
                 :on-remove="handleRemove"
                 :on-success="handleAvatarSuccessUP"
                 :data="{'xmfjBh':upxmfjBh}"
                 :before-upload="beforeAvatarUpload"
                 style="display: inline-block;width: 300px"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>

    <el-dialog title="停用项目空间" :visible.sync="stopXmkjdialogVisible" width="30%">
      <el-form :model="stopxmkj" class="demo-form-inline">
        <el-form-item label="房间号" label-width="100px">
          <el-input v-model="stopxmkj.xmfjHm" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="停用理由" label-width="100px">
          <el-input v-model="stopxmkj.xmfjTyly" autocomplete="off" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="stopXmkjdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="stopXmkj()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="项目空间详情" :visible.sync="XmkjDetaildialogVisible" width="50%">

      <el-descriptions  column="1" border>
        <el-descriptions-item label="房间号">{{ xmkjDetail.xmfjHm }}</el-descriptions-item>
        <el-descriptions-item label="房间位置">{{ xmkjDetail.xmfjWz }}</el-descriptions-item>
        <el-descriptions-item label="房间占地">{{ xmkjDetail.xmfjSize }}</el-descriptions-item>
        <el-descriptions-item label="启用时间">{{ xmkjDetail.xmfjQysj }}</el-descriptions-item>
        <el-descriptions-item label="是否审批通过">
          <el-tag v-if="xmkjDetail.status == '1'" size="small" type="primary">使用中</el-tag>
          <el-tag v-if="xmkjDetail.status == '-1'" size="small" type="danger">不可用</el-tag>
          <el-tag v-if="xmkjDetail.status == '0'" size="small" type="success">空闲</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="房间空调情况">{{ xmkjDetail.xmfjKtqk }}</el-descriptions-item>
        <el-descriptions-item label="桌椅情况">{{ xmkjDetail.xmfjZuoyi }}</el-descriptions-item>
        <el-descriptions-item label="门窗情况">{{ xmkjDetail.xmfjMcqk }}</el-descriptions-item>
        <el-descriptions-item label="其他">{{ xmkjDetail.xmfjQita }}</el-descriptions-item>
      </el-descriptions><br/>
<!--        项目空间实景：-->
<!--      <el-image-->
<!--          style="width: 100px; height: 100px"-->
<!--          :src="require('../../assets/xmkj/'+xmkjDetail.xmfjSjt)"-->
<!--          :preview-src-list="[require('../../assets/xmkj/'+xmkjDetail.xmfjSjt)]">-->
<!--      </el-image>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="XmkjDetaildialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="XmkjDetaildialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>



  </div>
</template>

<script>
import {queryXmkj,saveXmkj,stopXmkj} from "@/api/cxcyxm"
import axios from "../../axios/axios.js";

export default {
  data() {
    return {
      sfytp:false,
      pageNo: 1,
      pageSize: 5,
      totalSize: 0,
      keyWord:{
        kjhm:"",
        // xmBh:localStorage.getItem("xmBh")
      },
      size: 0,
      loading: true,
      xmKjList: [],
      newXmkjdialogVisible: false,
      upXmkjdialogVisible: false,
      XmkjDetaildialogVisible: false,
      stopXmkjdialogVisible: false,
      newXmkj:{
        xmfjHm:"",
        xmfjWz:"",
        xmfjSize:"",
        xmfjKtqk:"",
        xmfjZuoyi:"",
        xmfjMcqk:"",
        xmfjQita:"",
        xmfjQysj:""
      },
      upXmkj:{
        xmfjBh:"",
        xmfjHm:"",
        xmfjWz:"",
        xmfjSize:"",
        xmfjKtqk:"",
        xmfjZuoyi:"",
        xmfjMcqk:"",
        xmfjQita:"",
        xmfjQysj:""
      },
      upxmfjSjt:"",
      stopxmkj:{},
      xmkjDetail:{},
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      isDetail:false,
      upXmfjSjtdialogVisible:false,
      upxmfjBh:""
    }
  },
  created() {
    this.showXmkj()
  },
  methods: {
    showXmkj() {
      queryXmkj({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code !== "200") {
          this.$message.error(res.msg);
        } else {
          this.xmKjList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = parseInt(`${val}`);
      this.pageNo = 1;
      queryXmkj({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code === "200") {
          this.xmKjList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }

      })
    },
    handleCurrentChange(val) {
      this.pageNo = parseInt(`${val}`);
      if (this.pageNo > this.totalSize) {
        this.pageNo = this.totalSize
      }

      queryXmkj(
          {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            keyWord:this.keyWord
          }).then(res => {
        if (res.code === "200") {
          this.xmKjList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    addXmkj(){
      saveXmkj(this.newXmkj).then(res=>{
        if (res.code == "200") {
          this.$message.success(res.msg)
          this.newXmkjdialogVisible = false
          this.showXmkj()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    toUpdateXmkj(xmfjBh) {
      axios({
        method: "GET",
        url: "/xmkj/queryXmkjDetail/" + xmfjBh
      }).then(res => {
        if (res.code == "200") {
          this.upXmkj = res.data
          this.upXmkjdialogVisible = true
          this.upxmfjSjt = require('../../assets/xmkj/'+this.upXmkj.xmfjSjt)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    updateXmkj(){
      saveXmkj(this.upXmkj).then(res=>{
        if (res.code == "200") {
          this.$message.success(res.msg)
          this.upXmkjdialogVisible = false
          this.showXmkj()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    toXmkjDetail(xmfjBh){
      axios({
        method: "GET",
        url: "/xmkj/queryXmkjDetail/" + xmfjBh
      }).then(res => {
        if (res.code == "200") {
          this.xmkjDetail = res.data
          this.XmkjDetaildialogVisible = true
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log("this.dialogImageUrl",this.dialogImageUrl)
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    tostopXmkj(xmfjBh) {
      axios({
        method: "GET",
        url: "/xmkj/queryXmkjDetail/" + xmfjBh
      }).then(res => {
        if (res.code == "200") {
          this.stopxmkj = res.data
          this.stopXmkjdialogVisible = true
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    stopXmkj(){
      stopXmkj(this.stopxmkj).then(res =>{
        if (res.code == "200") {
          this.$message.success(res.msg)
          this.stopXmkjdialogVisible = false
          this.showXmkj()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    tostartXmkj(xmfjBh){
      axios({
        method: "POST",
        url: "/xmkj/startXmkj/" + xmfjBh
      }).then(res => {
        if (res.code == "200") {
          this.$message.success(res.msg)
          this.showXmkj()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleAvatarSuccessUP(res, file) {
      console.log("res",res)
      this.$message.success("图片上传成功")
      this.upXmfjSjtdialogVisible = false
      this.showXmkj()
      this.$router.go(0)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    toupxmfjSjt(xmfjBh){
      this.upXmfjSjtdialogVisible = true
      this.upxmfjBh = xmfjBh
    }
  }
}
</script>

<style>
.form{
  width:60%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  right: -5%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0 20px 0;
}
.etable{
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
